<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="font_gacpbu65edk/iconfont.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				list-style: none;
				
			}
			.y-zong{
				width: 100%;
				background-color: #f6f7f9;
				height: 130rem;
			}
			.y-to{
	width: 100%;
	
	background-color: #FFFFFF;
}
.y-to a{
	font-size: 3.5rem;
	margin-left: 31%;
	line-height: 10rem;
	padding-top: 0.75rem;
}
.icon{
	font-size: 3rem;
	float: left;
	line-height: 11rem;
	
}
.y_ul{
	width: 100%;
	height: 10rem;
	padding:2rem 2rem;
	overflow: hidden;
	
}
.y_ul li{
	float: left;
	width: 33.3%;
	text-align: center;
	line-height:10rem;
	font-size: 2.8rem;
	color:#979797;
	position: relative;
}
.y_ul li.active{
	border-top: 1px solid #ffb400;
	color:#ffb400;
}
.y_list_span{
	display: inline-block;
	width: 4rem;
	height:4rem;
	background: #ffb400;
	position: absolute;
	top: -2rem;
	left:calc(50% - 2rem) ;
	border-radius: 50%;
	display: none;
	padding: 0.8rem;
}
.y_list_span img{
	width:3rem;
	height: 2rem;
	float: left;
}
.y_list_span.active{
	display: block;
}
.y-zhong{
	width: 100%;
	background-color: #FFFFFF;
	height: 50rem;

}
.y-zhong1{
	width: 100%;
	height: 10rem;
	
	border-bottom: 1px solid #dcdcdc;
}
.y-zhong1 span{
	font-size: 3rem;
	line-height:10rem ;margin-left: 3rem;
}
.y-zhong1 a{
	font-size: 2rem;
	margin-left: 63%;
}
.y-zhong2{
	width: 100%;
	height: 10rem;

	border-bottom: 1px solid #dcdcdc;
}
.y-zhong2 span{
	font-size: 3rem;
	line-height:10rem ;margin-left: 3rem;
}
.y-zhong2 a{
	font-size: 2rem;
	margin-left: 38%;
}
.y-zhong3{
	width: 100%;
	height: 10rem;
	
	border-bottom: 1px solid #dcdcdc;
}
.y-zhong3 span{
	font-size: 3rem;
	line-height:10rem ;margin-left: 3rem;
}
.y-zhong3 a{
	font-size: 2rem;
	margin-left: 54%;
}
.y-zhong4{
	width: 100%;
	height: 10rem;

	border-bottom: 1px solid #dcdcdc;
}
.y-zhong4 span{
	font-size: 3rem;
	line-height:10rem ;margin-left: 3rem;
}
.y-zhong4 a{
	font-size: 2rem;
	margin-left: 34%;
}
.y-zhong5{
	width: 100%;
	height: 10rem;
	
	border-bottom: 1px solid #dcdcdc;
}
.y-zhong5 span{
	font-size: 3rem;
	line-height:10rem ;margin-left: 3rem;
}
.y-zhong5 a{
	font-size: 2rem;
	margin-left: 26%;
}
.y-xial{
	width: 100%;
	height: 5rem;
	
	margin-top: 2.5rem;
}
.y-xial a{
	width: 6%;
	height: 4rem;
	background-color: #ffa800;
	margin-top: 0.6rem;
	border-radius: 20rem;
	float: left;
	margin-left: 4rem;
}
.y-xial img
{
	margin-left: 1rem;
	margin-top: 1.2rem;
}
.y-xial span{
	color: #FFA800;
	font-size: 3rem;
	margin-top: 0.5rem;
}
.y-dixa{
	width: 80%;
	height: 8rem;
	background-color: #FFA800;
	border-radius: 2rem;
	margin: 0 auto;
	margin-top: 5rem;
}
.y-dixa{
	color: #FFFFFF;
	font-size: 3.5rem;
	line-height: 8rem;
	text-align: center;
}
.y-wan{
	width: 100%;
	height: 5rem;

}
.y-wan p{
	color: #FFA800;
	font-size: 2.2rem;
	text-align: center;
	line-height: 5rem;
	margin-bottom: 30rem;
}
		</style>
	</head>
	<body>
		<div class="y-zong">
			<div class="y-to"><span class="icon iconfont">&#xe617;</span><a>基本信息</a></div>
			<ul class="y_ul">
					<li class="active">身份认证 <span class="y_list_span active"><img src="01.png"></span></li>
					<li class="active">银行卡认证 <span class="y_list_span active"><img src="01.png"></span></li>
					<li>手机认证<span class="y_list_span"><img src="img/01.png"></span></li>
				</ul>
				<div class="y-zhong">
					<div class="y-zhong1"><span>姓名</span><a>朱晓康</a></div>
					<div class="y-zhong2"><span>身份证号</span><a>2102283654789</a></div>
					<div class="y-zhong3"><span>开户行</span><a>工商银行</a></div>
					<div class="y-zhong4"><span>储蓄卡号</span><a>622148579625043</a></div>
					<div class="y-zhong5"><span>银行预留手机号</span><a>13311475720</a></div>
				</div>
				<div class="y-xial">
					<a><img src="img/congi.png"/></a><span>《个人信息及征信查询授权书》</span>
				</div>
				<div class="y-dixa"><p>下一步</p></div>
				<div class="y-wan"><p>您只能认证自己的银行卡，若姓名有误请点击修改</p></div>
		</div>
	</body>
</html>
